<template>
    <div>
        <h-section title="需求阶段平均耗时">
            <div style="height: 350px; overflow: auto">
                <flexbox orient="vertical" align="flex-start">
                    <a-row style="width: 100%; margin-bottom: 16px" v-for="item of list" :key="item.stage" :gutter="24">
                        <a-col :span="6">
                            <div style="width: 100%">
                                {{ item.stage }}
                            </div>
                        </a-col>
                        <a-col :span="6">
                            <div style="width: 100%">
                                {{ item.avgConsumeTime }}
                            </div>
                        </a-col>
                        <a-col :span="12">
                            <div style="width: 100%">
                                <a-progress :percent="item.consume_time" />
                            </div>
                        </a-col>
                    </a-row>
                </flexbox>
            </div>
        </h-section>
    </div>
</template>

<script lang="ts">
import api from '@/api';
import { defineComponent, ref } from 'vue';
export default defineComponent({
    name: 'RequireTimeChart',
    props: {
        detail: { type: Object, default: () => ({}) }
    },
    setup(props) {
        const list = ref<any[]>([]);
        const getData = async () => {
            const query = {
                system: props.detail.id
            };
            const { success, moule } = await api.statisticsModel.statisticsRequireCustomTime(query);
            if (success) {
                let totolTime = 0;
                totolTime = moule.reduce((prev, curr) => {
                    return (prev += curr.consume_time);
                }, 0);
                list.value = moule.map((item) => ({
                    ...item,
                    consume_time: +((item.consume_time / totolTime) * 100).toFixed(1)
                }));
            }
        };
        getData();
        return {
            list
        };
    }
});
</script>
<style scoped>
</style>